<template>
	<view class="pb-safe-area">
		<view class="flex header flex-center" v-if="userStore.hasLogin()">
			<view class="headimg" :class="{ 'headimg-vip': USERINFO.vip_state }">
				<image :src="USERINFO.headimg" class="headimg-image" />
				<uni-icons type="vip-filled" class="headimg-vip-icon" size="20" color="var(--xl-vip-color)"></uni-icons>
			</view>
			<view class="flex-1 pl-4">
				<view class="font-weight-600 mb-1 text-white">{{ USERINFO.nickname }}</view>
				<view class="h10 text-4C402E" v-if="USERINFO.vip_state">{{ USERINFO.vip_title }}
					{{ USERINFO.days_remaining ? USERINFO.days_remaining + '天后到期' : '永久' }}</view>
				<view class="h10 text-4C402E" v-else-if="WEBCONFIG?.mp_audit">未开通{{ WEBCONFIG.vip_name }}
				</view>
			</view>
			<view class="text-placeholder h10" @tap="setClipboard(USERINFO.id + '')">ID：{{ USERINFO.id }}
			</view>
		</view>
		<view class="flex header flex-center" v-else @click="clickPage">
			<view class="headimg flex flex-center bg-bg-grey">
				<uni-icons type="person-filled" size="30" color="var(--xl-placeholder)"></uni-icons>
			</view>
			<view class="flex-1 pl-4">
				<view class="font-weight-600 mb-1 text-white">点击登录</view>
			</view>
		</view>
		<view class="p-4 flex flex-column grid-gap-6">
			<view class="flex p-2" v-if="dealer.config.dealer_state === 'yes'">
				<view class="flex-1 text-center py-4 rounded-4" hover-class="bg-bg-grey"
					@tap="clickPage('/pages/dealer/people')">
					<view class="text-white font-weight-600 h8">{{ dealer.user.people_num }}</view>
					<view class="h10 text-placeholder mt-2">邀请人数</view>
				</view>
				<view class="flex-1 text-center py-4 rounded-4" hover-class="bg-bg-grey" @tap="clickDealer">
					<view class="text-white font-weight-600 h8">{{ dealer.user.order_price }}</view>
					<view class="h10 text-placeholder mt-2">订单总额</view>
				</view>
				<view class="flex-1 text-center py-4 rounded-4" hover-class="bg-bg-grey"
					@tap="clickPage('/pages/dealer/log')">
					<view class="text-white font-weight-600 h8">{{ dealer.user.dealer_price }}</view>
					<view class="h10 text-placeholder mt-2">累计收益</view>
				</view>
			</view>
			<view class="vip-banner flex flex-center p-4 rounded-4">
				<view style="width: 50px;"></view>
				<view class="flex-1 flex flex-column grid-gap-2">
					<text class="text-4C402E font-weight-600 h9">{{ WEBCONFIG?.web_name }}{{ WEBCONFIG?.vip_name }}</text>
					<view class="text-4C402E h10">{{USERINFO?.vip_state?'续费':'开通'}}{{ WEBCONFIG?.vip_name }}享受更多权益</view>
				</view>
				<view class="bg-4C402E h10 mx-2 rounded-round py-2 px-4 text-white" v-if="USERINFO?.vip_state"
					@tap="openVip">续费</view>
				<view class="bg-4C402E rounded-round mx-2 h10 py-2 px-4 text-white" v-else @tap="openVip">
					开通{{ WEBCONFIG?.vip_name }}</view>
			</view>
			<view class="agent-banner flex flex-center p-4" v-if="dealer.config.dealer_state === 'yes'">
				<view style="width: 50px;"></view>
				<view class="flex-1 flex flex-column grid-gap-2">
					<text class="text-white font-weight-600 h9">{{ WEBCONFIG?.web_name }}代理</text>
					<view class="agent-text h10" v-if="dealer.state === 1">欢迎回来，{{ USERINFO.nickname }}</view>
					<view class="agent-text h10" v-else>成为代理，躺赚收益！</view>
				</view>
				<view class="agent-btn h9 mx-2 rounded-round py-2 px-4 text-white" v-if="dealer.state === 1"
					@tap="clickDealer">分销中心</view>
				<view class="agent-btn h9 mx-2 rounded-round py-2 px-4 text-white"
					v-else-if="dealer.state === 0">审核中</view>
				<view class="btn-active rounded-round mx-2 h9 py-2 px-4 text-white" v-else @tap="clickDealer">立即开通
				</view>
			</view>
			<view class="bg-bg-grey rounded-4 p-2 flex flex-column grid-gap-4 menus">
				<view class="flex rounded-4 p-4 flex-center menu-item" hover-class="bg" @tap="openRegister">
					<image src="@/static/icon-1.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600 flex-1 text-white">{{ WEBCONFIG?.money_name }}</view>
					<x-money type="danger" unit-type="danger" weight="bold" size="10" :money="USERINFO?.integral"
						unit="">
						<template #suffix>
							<text class="h10 text-danger">{{ WEBCONFIG.money_unit_name }}</text>
						</template>
					</x-money>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex rounded-4 p-4 flex-center menu-item" hover-class="bg"
					@tap="clickPage('/pages/dealer/withdrawal')" v-if="dealer.config.dealer_state === 'yes'">
					<image src="@/static/icon-2.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600 flex-1 text-white">提现</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex rounded-4 p-4 flex-center menu-item" hover-class="bg"
					@tap="clickPage('/pages/dealer/log')" v-if="dealer.config.dealer_state === 'yes'">
					<image src="@/static/icon-3.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600 flex-1 text-white">收益</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
			</view>
			<view class="bg-bg-grey rounded-4 p-2 flex flex-column grid-gap-4 menus">
				<view class="flex rounded-4 p-4 flex-center menu-item" hover-class="bg"
					@tap="clickPage('/pages/order/index')">
					<image src="@/static/icon-6.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600 flex-1 text-white">订单</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex rounded-4 p-4 flex-center menu-item" hover-class="bg"
					@tap="$page.open('/pages/article/content?alias=help')">
					<image src="@/static/icon-7.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600 flex-1 text-white">学院</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex rounded-4 p-4 flex-center menu-item" hover-class="bg"
					@tap="$page.open('/pages/article/content?alias=about')">
					<image src="@/static/icon-8.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600 flex-1 text-white">关于</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex rounded-4 p-4 flex-center menu-item" hover-class="bg"
					@tap="$page.open('/pages/article/contact?alias=contact')">
					<image src="@/static/icon-10.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600 flex-1 text-white">联系我们</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex rounded-4 p-4 flex-center menu-item" hover-class="bg"
					@tap="clickPage('/pages/card/password')">
					<image src="@/static/icon-9.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600 flex-1 text-white">卡密兑换</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
			</view>
		</view>
		<x-login ref="xLoginRef" @success="getDealer" auto-hide-tab-bar />
		<x-vip ref="xVipRef" @success="" auto-hide-tab-bar />
		<x-tabbar page="pages/user/index" />
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useUserStore, useWebConfigStore, useRefs } from '@/stores';
import { $page, $http, login, $system } from '@/utils';
import { getConfig, getUserInfo } from '@/utils/api';
import { onLoad, onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
const userStore = useUserStore();
const { USERINFO } = useRefs(userStore);
const webConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(webConfigStore);
const xLoginRef = ref();
const xVipRef = ref();
const dealer = ref({
	state: null,
	link: '',
	qrcode: '',
	icode: '',
	user: {
		people_num: '--',
		order_num: '--',
		order_price: '--',
		dealer_price: '--',
	},
	config: {
		dealer_state: 'no',
		dealer_apply: 'yes',
		dealer_apply_price: '',
		dealer_apply_refund: '',
		dealer_apply_refund_text: '',
		dealer_level: 0,
		dealer_proportion: 0,
		dealer_proportion_level_1: 0,
		dealer_proportion_level_2: 0,
		dealer_proportion_level_3: 0,
	},
})
onLoad(() => {
})
onShow(() => {
	uni.hideTabBar();
	getConfig();
	if (!userStore.hasLogin()) {
		return;
	}
	getDealer();
	getUserInfo();
})
onShareAppMessage(() => {
	return $page.shareMessage({
		path: `/pages/index/index`
	})
})
onShareTimeline(() => {
	return $page.shareTimeline({
		path: `/pages/index/index`
	})
})

const getDealer = () => {
	$http.get('Dealer/dealer').then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			dealer.value = res.data;
		}
	})
}
const clickDealer = () => {
	if (userStore.hasLogin()) {
		if (dealer.value.state === 1) {
			$page.open('/pages/dealer/index');
		} else {
			$page.open('/pages/dealer/apply');
		}
	} else {
		login({ redirect: 'user' }, xLoginRef)
	}
}
const clickPage = (url: string) => {
	if (userStore.hasLogin()) {
		$page.open(url);
	} else {
		login({ redirect: 'user' }, xLoginRef)
	}
}
const setClipboard = (data: any) => {
	uni.setClipboardData({
		data
	})
}
const openRegister = () => {
	if (userStore.hasLogin()) {
		if (WEBCONFIG.value?.mp_audit || !$system.isIOS()) {
			$page.open('/pages/register/index');
		} else {
			$page.open('/pages/user/bill');
		}
	} else {
		login({ redirect: 'user' }, xLoginRef)
	}
}
const openVip=()=>{
	if (userStore.hasLogin()) {
		xVipRef.value.show();
	} else {
		login({ redirect: 'user' }, xLoginRef)
	}
}
</script>

<style lang="scss" scoped>
.header {
	padding: 20px;

	.headimg {
		width: 64px;
		height: 64px;
		border: solid 2px var(--xl-bg-grey);
		border-radius: 9999rpx;
		position: relative;
		--xl-vip-color: var(--xl-placeholder);

		&.headimg-vip {
			--xl-vip-color: #4C402E;
		}

		&-image {
			width: 60px;
			height: 60px;
			border-radius: 9999rpx;
		}

		.headimg-vip-icon {
			width: 20px;
			height: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 0px;
			bottom: 0px;
			background-color: var(--xl-bg-grey);
			border-radius: 9999rpx;
		}
	}
}

.agent-banner {
	width: 100%;
	height: 116rpx;
	background-image: url();
	background-size: 100% 100%;
	background-repeat: no-repeat;

	.agent-text {
		background-image: linear-gradient(115.42deg, rgba(202, 161, 150, 1) 0%, rgba(243, 227, 198, 1) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.agent-btn {
		text-align: center;
		color: rgba(249, 236, 236, 0.75);
		border-radius: 100px;
		background: rgba(97, 93, 115, 1);
		border: 1px solid rgba(249, 236, 236, .75);
	}
}

.vip-banner {
	background-image: url(@/static/vip-bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 116rpx;
}

.block-icon {
	width: 45px;
	height: 45px;
}

.block-icon-1 {
	width: 25px;
	height: 25px;
	border-radius: 14px;
	margin-right: 12px;
}
.menus{
	.menu-item {
		position: relative;
		&::before {
			content: '';
			position: absolute;
			left: 45px;
			right: -12rpx;
			bottom: -13rpx;
			height: 1px;
			background-color: var(--xl-bg);
		}
		&:last-child::before {
			display: none;
		}
	}
}
.mt--4 {
	margin-top: -12px;
}

</style>